<template>
  <div class="form" @click.stop.prevent="">
    <div class="form_head l-f l-row-sb">
      <div class="form_head_left l-f">
        <img class="form_head_left_logo" src="@/assets/logo.svg" />
        <div class="form_head_left_info">
          <p class="form_head_left_info_name">Tether Gold</p>
          <p class="form_head_left_info_desc">{{COIN.name}}USDT</p>
        </div>
      </div>
      <div class="form_head_right">
        <p class="form_head_right_money">${{dayMarket.close}}</p>
        <div class="l-f l-row-end">
          <img
            class="form_head_right_icon"
            :src="isUp(dayMarket.change) ? IconUp : IconDown"
            alt=""
          />
          <p class="form_head_right_rate" :class="isUp(dayMarket.change) ? 'color-green' : 'color-red'">{{dayMarket.change}} %</p>
        </div>
      </div>
    </div>
    <div class="form_content">
      <div class="form_content_limit l-f">
        <div class="form_content_limit_select l-f l-row-sb" @click="onOpen">
           <p class="form_content_limit_select_label">{{ currentIndex == 0 ? $t('contract.limitOrder') : $t('contract.marketOrder')}}</p>
           <img src="@/assets/icons/icon-down_sanjao.svg" />
        </div>
        <p class="form_content_limit_num">100X</p>
      </div>
      <NumberInput v-if="currentIndex == 0" v-model="targetPrice" :height="48" />
      <p v-else class="form_content_market">{{$t('home.marketPrice')}}</p>
      <div class="form_content_hands l-f">
        <AmountInput class="form_content_hands_input l-f1" v-model="number" :max="balanceTotal" @input="numberInput" />
        <p class="form_content_hands_unit">{{$t('contract.transactionQuantity')}}</p>
      </div>
      <div class="form_content_fee l-f l-row-sb">
        <!-- <p class="form_content_fee_title">≈$0</p> -->
        <p class="form_content_fee_money">{{$t('account.fee')}}: $ {{feeAmount}}</p>
      </div>
       <ProgressBar ref="progressRef" @change="progressChange" />
       <!-- 止盈/止损 -->
      <div class="form_content_win">
        <div class="form_content_win_check l-f">
          <div class="form_content_win_check_box l-f l-row-c" @click="onCheck">
            <img v-if="isCheck" class="form_content_win_check_box_icon" src="@/assets/icons/icon-check.svg" />
            <div v-else class="form_content_win_check_box_no-select"></div>
          </div>
          <p class="form_content_win_check_label">{{$t('contract.takeProfit')}}/{{$t('contract.stopLose')}}</p>
        </div>
        <div class="form_content_win_input l-f" v-if="isCheck">
          <div class="form_content_win_input_item l-f1">
            <AmountInput v-model="takeProfit" :placeholder="$t('contract.takeProfit')" />
          </div>
          <div class="form_content_win_input_item l-f1">
            <AmountInput v-model="stopLose" :placeholder="$t('contract.stopLose')" />
          </div>
        </div>
      </div>
      <div class="l-f l-row-sb form_content_balance">
        <p class="form_content_balance_label">{{$t('account.availableBalance')}}</p>
        <p class="form_content_balance_value l-text-gradient">{{balanceTotal.toFixed(4)}} USDT</p>
      </div>
    </div>
    <div class="form_bottom l-f l-row-sb">
      <a-button
        @click="onSubmit(0)"
        class="form_bottom_btn bg-green"
        type="primary"
        >{{ $t("option.buyLong") }}</a-button
      >
      <a-button
        @click="onSubmit(1)"
        class="form_bottom_btn bg-red"
        type="primary"
        >{{ $t("option.buyShort") }}</a-button
      >
    </div>
  </div>
    <a-drawer
    v-if="isMobile"
    v-model:open="isOpen"
    :closable="false"
    :height="350"
    style="background-color: #191934;border-top-left-radius: 20px;border-top-right-radius: 20px;"
    placement="bottom"
  >
    <template #title>
      <div class="l-f l-row-c">
        <div class="popup-line"></div>
      </div>
    </template>
     <LimitOrder @select="limitSelect" />
  </a-drawer>
   <a-modal v-else v-model:open="isOpen" :footer="null">
    <template #closeIcon>
      <img src="@/assets/icons/icon-close.svg" alt="">
    </template>
       <LimitOrder @select="limitSelect" />
    </a-modal>
</template>

<script setup>
import { ref, computed, onMounted,  } from "vue";
import { message } from 'ant-design-vue'
import { useI18n } from 'vue-i18n'
import { useMainStore } from '@/store'
import { isUp } from '@/utils/index.js'
import { COIN } from '@/common/index.js'
import { numberFormat, throttle } from '@/utils/index.js'
import { getContractFeeApi } from '@/api/tradeApi.js'
 
import NumberInput from "@/components/numberInput/index.vue";
import ProgressBar from '@/components/progressBar/index.vue'
import AmountInput from '@/components/amountInput/index.vue'
import LimitOrder from '../limitOrder/index.vue'

import IconUp from '@/assets/icons/icon-coin_up.svg'
import IconDown from '@/assets/icons/icon-coin_down.svg'


const emits = defineEmits(['submit'])

const { t } = useI18n()
const mainStore = useMainStore()

const isMobile = computed(() => {
  return mainStore.isMobile
})

const dayMarket = computed(() => {
  return mainStore.dayMarket
})

const balanceTotal = computed(() => {
    return mainStore.userInfo.balance
})

const feeAmount = computed(() => {
  return parseFloat((number.value * contractFee.value) / 100).toFixed(4)
})

const progressRef = ref(null)
const targetPrice = ref(0);
const number = ref(0)
const isCheck = ref(false)
const currentIndex = ref(0);
const isOpen = ref(false)
const contractFee = ref(0)
const takeProfit = ref(0)
const stopLose = ref(0)


onMounted(() => {
  if(dayMarket.value.close) {
    targetPrice.value = dayMarket.value.close
  }else {
    setTimeout(() => {
      targetPrice.value = dayMarket.value.close
    },2000)
  }
  getContractFee()
})

const onOpen= () => {
  isOpen.value = true
}

const onCheck = () => {
  isCheck.value = !isCheck.value
}

const limitSelect = (index) => {
  currentIndex.value = index
  isOpen.value = false
  if(index == 1) {
    targetPrice.value = dayMarket.value.close
  }
}

const progressChange = (val) => {
  number.value = numberFormat((balanceTotal.value * val) / 100)
}

const numberInput = (val) => {
  let rate = (val / balanceTotal.value).toFixed(4)
  progressRef.value.setProgress(parseFloat(rate))
}

const onSubmit = throttle((type) => {
  let min = 1,
    max = 100000000;
  if (number.value < min || number.value > max) {
    message.warning(
      t("option.theValidAmountRangeIsAnd", { min: min, max: max })
    )
    return
  }

  if(isCheck.value) {
    // if(type === 0) {
    //   if(takeProfit.value < dayMarket.value.close) {
    //     return message.error(t("contract.takeProfitHigherTarget"))
    //   }
    // }else {
    //   if(stopLose.value > dayMarket.value.close) {
    //     return message.error(t("contract.takeProfitLowerTarget"))
    //   }
    // }
  }

  emits('submit', {
    targetPrice: targetPrice.value,
    number: number.value,
    buyType: type,
    orderType: currentIndex.value,
    takeProfit: takeProfit.value,
    stopLose: stopLose.value
  })
},3000)

// 重置表单
const resetForm = () => {
  progressRef.value.setProgress(0)
  number.value = 0
  currentIndex.value = 0
  takeProfit.value = 0
  stopLose.value = 0
  isCheck.value = false
}

// 获取手续费
const getContractFee = async () => {
  const res = await getContractFeeApi()
  contractFee.value = res.contract_fee
}

defineExpose({
  resetForm
})

</script>

<style lang="scss" scoped>
.form {
  &_head {
    &_left {
      &_logo {
        width: 48px;
        height: 38px;
      }
      &_info {
        margin-left: 15px;
        &_name {
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
        }
        &_desc {
          font-size: 12px;
          color: #575b66;
        }
      }
    }
    &_right {
      &_money {
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
      }
      &_icon {
        width: 16px;
        height: 16px;
      }
      &_rate {
        font-size: 12px;
        color: #e8503a;
        font-weight: 400;
      }
    }
  }
  &_content {
    &_limit {
      margin-top: 15px;
      margin-bottom: 15px;
      gap: 10px;
      &_select {
        background: #d9d9d90d;
        border-radius: 8px;
        width: 100%;
        padding: 0 16px;
        height: 48px;
        cursor: pointer;
        &_label {
          font-size: 14px;
          color: #ffffff;
          font-weight: 400;
        }
        &_icon {
          width: 9px;
          height: 5px;
        }
      }
      &_num {
        padding: 0 16px;
        height: 48px;
        background: #d9d9d90d;
        border-radius: 8px;
        width: 100%;
        text-align: center;
        line-height: 48px;
      }
    }
    &_market {
       background: #d9d9d90d;
        border-radius: 8px;
        height: 48px;
        padding: 0 16px;
        margin-top: 15px;
        font-size: 14px;
        color: #fffc;
        text-align: center;
        line-height: 48px;
    }
    &_hands {
        background: #d9d9d90d;
        border-radius: 8px;
        height: 48px;
        padding: 0 16px;
        margin-top: 15px;
        &_input {
          height: 100%;
          font-size: 14px;
          color: #ffffff;
          font-weight: 400;
          background-color: transparent;
          border: none;
          outline: none;
        }
        &_unit {
          font-size: 14px;
          color: #ffffff;
          font-weight: 400;
        }
    }
    &_fee {
      margin: 10px 0;
      &_title {
        font-size: 12px;
        color: #b8b8b8;
        font-weight: 500;
      }
      &_money {
        font-size: 12px;
        color: #b8b8b8;
        font-weight: 500;
      }
    }
    &_win {
      &_check {
        &_box {
          width: 14px;
          height: 14px;
          cursor: pointer;
          &_no-select {
            background: #b8b8b880;
            border-radius: 3px;
            width: 100%;
            height: 100%;
          }
          &_icon {
            width: 100%;
            height: 100%;
          }
        }
        &_label {
          margin-left: 6px;
          font-size: 12px;
          font-weight: 500;
          color: #ffffff;
        }
      }
      &_input {
        margin-top: 10px;
        gap: 10px;
        &_item {
          background: #d9d9d90d;
          border-radius: 8px;
          height: 48px;
          padding: 0 16px;
        }
      }
    }
    &_balance {
      margin: 15px 0;
      &_label {
        font-size: 12px;
        color: #fffc;
        opacity: .5;
        font-weight: 400;
      }
      &_money {
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  &_confirm {
    height: 52px;
    width: 100%;
    font-weight: 500;
    margin-top: 10px;
  }
  &_bottom {
    margin-top: 30px;
    gap: 30px;
    &_btn {
      height: 42px;
      font-weight: 500;
      width: 100%;
      color: #ffffff !important;
      font-size: 12px;
    }
  }
}
.popup-line {
  border-radius: 12px;
  width: 106px;
  height: 4px;
  background: #e9ecef14;
}
@media only screen and (max-width: 1200px) {
  .form {
    &_head {
      display: none;
    }
    &_content {
      &_list {
        &_item {
          background-color: #12112c;
        }
      }
    }
  }
}
</style>